	<!DOCTYPE html>
	<html>
	<head>
	   <title>Bootstrap </title>
	   <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
	   <script src="jquery-3.3.1.min.js"></script>
	   <script src="bootstrap/js/bootstrap.js"></script>
	   <script language="javascript" type="text/javascript" src="My97DatePicker/WdatePicker.js"></script>
	   <script src="jquery-validation/jquery.validate.min.js"></script>
	   <script src="jquery-validation/messages_zh.js"></script>
	   <style>
	   .form-bg{
		background: #00b4ef;
	}

	.form-horizontal{
		background: #fff;
		padding-bottom: 40px;
		border-radius: 15px;
		text-align: center;
		margin-left: 300px;

	}
	.form-horizontal .heading{
		display: block;
		font-size: 35px;
		font-weight: 700;
		padding: 35px 0;
		border-bottom: 1px solid #f0f0f0;
		margin-bottom: 30px;
	}
	.form-horizontal .form-group{
		padding: 0 40px;
		margin: 0 0 25px 0;
		position: relative;
	}
	.form-horizontal .form-control{
		background: #f0f0f0;
		border: none;
		border-radius: 20px;
		box-shadow: none;
		padding: 0 20px 0 45px;
		height: 40px;

	}
	.form-horizontal .form-control:focus{
		background: #e0e0e0;
		box-shadow: none;
		outline: 0 none;
	}

	.form-horizontal .main-checkbox{
		float: left;
		width: 20px;
		height: 20px;
		background: #11a3fc;
		border-radius: 50%;
		position: relative;
		margin: 5px 0 0 5px;
		border: 1px solid #11a3fc;
	}
	.form-horizontal .main-checkbox label{
		width: 20px;
		height: 20px;
		position: absolute;
		top: 0;
		left: 0;
		cursor: pointer;
	}
	.form-horizontal .main-checkbox label:after{
		content: "";
		width: 10px;
		height: 5px;
		position: absolute;
		top: 5px;
		left: 4px;
		border: 3px solid #fff;
		border-top: none;
		border-right: none;

		opacity: 0;
		-webkit-transform: rotate(-45deg);
		transform: rotate(-45deg);
	}
	.form-horizontal .main-checkbox input[type=checkbox]{
		visibility: hidden;
	}
	.form-horizontal .main-checkbox input[type=checkbox]:checked + label:after{
		opacity: 1;
	}
	.form-horizontal .text{
		float: left;
		margin-left: 7px;
		line-height: 20px;
		padding-top: 5px;
		text-transform: capitalize;
	}


	.form-horizontal .loginbtn{
		float: right;
		font-size: 14px;
		color: #fff;
		background: #00b4ef;
		border-radius: 30px;
		padding: 10px 25px;
		border: none;
		text-transform: capitalize;
		outline:none;

	}
		.form-horizontal .btn{
			padding: 10px 20px;
		}
	.span6{
	height:56px;
	width: 960px;
	}
	.carousel-inner{
		height: 56px;
		width: 960px;
	}
	nav{
	background-color:	#2F4F4F;
	}
	.error{
	color:red;
    }

	   </style>
	   	<script>
 $.validator.setDefaults({
    submitHandler: function() {
      alert("提交事件!");
    }
});
     $().ready(function() {
      $("#form-group").validate({
	    rules: {
	      form_username: 
          {
	        required: true,
	        minlength: 6,
	      },
	      form_password: {
	        required: true,
	        minlength: 6,
	      },
	      form_cfpassword: {
	        required: true,
	        minlength: 6,
	        equalTo: "#form_password",
	      },
	      form_email: {
	        required: true,
	        email: true,
	      },
          form_tel: {
	        required: true,
	        minlength: 11,
			maxlength:11,
           },
		   form_birthday: {
	        required: true,
           },
		   },
	        messages: {
	      form_username:
         {
	        required: "请输入用户名",
	        minlength: "用户名不能少于6个字符",
	      },
	      form_password: {
	        required: "请输入密码",
	        minlength: "密码长度不能小于 6 个字符",
	      },
	      form_cfpassword: {
	        required: "请再次输入密码",
	        equalTo: "两次密码输入不一致",
	      },
		  form_tel: {
	        required: "请输入手机号码",
            minlength:"请输入正确的手机号码",
			maxlength:"请输入正确的手机号码",
	      },
		  form_birthday: {
	        required: "请输入生日",
           },
	      form_email: "请输入一个正确的邮箱",
	    }
	});
	
	});
	
	</script>
	</head>
	<body>
		<div class="row-fluid">
			<div class="span6">
	<nav class="navbar navbar-expand-sm navbar-dark">
	  <!-- Brand -->
	  <a class="navbar-brand" href="#">首页</a>

	  <!-- Links -->
	  <ul class="navbar-nav">
		<li class="nav-item dropdown">
		  <a class="nav-link dropdown-toggle" href="#"id="navbardrop" data-toggle="dropdown">
		  项目管理
		  </a>
		  <div class="dropdown-menu">
			<a class="dropdown-item" href="bootstrap_table.html" target="blank">项目人员管理</a>
			<a class="dropdown-item" href="#">项目进度查询</a>
		  </div>
		</li>
		<li class="nav-item">
		  <a class="nav-link" href="#">固定资产</a>
		</li>

		<!-- Dropdown -->
		<li class="nav-item dropdown">
		  <a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown">
			考勤管理
		  </a>
		  <div class="dropdown-menu">
			<a class="dropdown-item" href="#">申请休假</a>
			<a class="dropdown-item" href="#">考勤查询</a>
		  </div>
		</li>
	  </ul>
	</nav>
	<br>

	   </div>

			<div class="span6">

			</div>
		</div>	
	<div class="container">
		<div class="row">
			   <div class="col-lg-8">
				<form class="form-horizontal" >  
					<span class="heading">用户登录</span>
					<div class="form-group">
					<input  type="text" class="form-control"  placeholder="用户名" autocomplete="off">
					</div>
					<div class="form-group help">
						<input type="password" class="form-control"  placeholder="密　码">
					</div>
					<div class="form-group">
						<div class="main-checkbox">
							<input type="checkbox" value="None" id="checkbox1" name="check"/>
							<label for="checkbox1"></label>
							
						</div>
						<span class="text">Remember me</span>
						<button type="submit" class="loginbtn">登录</button>
						<button type="button" class="btn btn-link"><a data-toggle="modal" data-target="#register" href="">注册</a></button>      
					</div>
				</form>
			</div>
		</div>
	</div>
		 <div id="register" class="modal fade" tabindex="-1">
			 <div class="modal-dialog">
				 <div class="modal-content">
					 <div class="modal-body">
						 <button class="close" data-dismiss="modal">
							 <span>&times;</span>
						 </button>
					 </div>
					 <div class="modal-title">
						 <h1 class="text-center">注册</h1>
					 </div>
					 <div class="modal-body">
						 <form class="form-group cmxform" id="form-group" action="">
								 <div class="form-group">
									 <label for="">用户名</label>
									 <input class="form-control" id="form_username" name="form_username" type="text" placeholder="6-15位字母或数字">
								 </div>
								 <div class="form-group">
									 <label for="">密码</label>
									 <input class="form-control" id="form_password" name="form_password" type="password" placeholder="至少6位字母或数字">
								 </div>
								 <div class="form-group">
									 <label for="">再次输入密码</label>
									 <input class="form-control" id="form_cfpassword" name="form_cfpassword" type="password" placeholder="至少6位字母或数字">
								 </div>
								 <div class="form-group">
									 <label for="">邮箱</label>
									 <input class="form-control" id="form_email" name="form_email" type="text" placeholder="例如:123@123.com">
								 </div>
								 <div class="form-group">
									 <label for="">电话</label>
									 <input class="form-control" id="form_tel" name="form_tel" type="text" placeholder="139********">
								 </div>
								 <div class="form-group">
									 <label for="">生日</label>
									 <input class="form-control Wdate" id="form_birthday" name="form_birthday" type="text" onClick="WdatePicker({el:this,dateFmt:'yyyy-MM-dd HH:mm:ss'})">
								 </div>
								 <div class="text-right">
									 <button class="btn btn-primary" type="submit">提交</button>
									 <button class="btn btn-danger" data-dismiss="modal">取消</button>
								 </div>
								 <a href="" data-toggle="modal" data-dismiss="modal" data-target="#login">已有账号？点我登录</a>
						 </form>
					 </div>
				 </div>
			  </div>
		  </div>
	</body>
	</html>
